<div class="search content">
  <form nz-form [formGroup]="searchFrom" (ngSubmit)="searchResult()">
    <div nz-row nzGutter="48">
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>工作名称</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="name" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>工作目标</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="target" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>属性标签</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="tags" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>完成状态</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="processStatus" nzAllowClear>
              <nz-option nzValue="1" nzLabel="已完成"></nz-option>
              <nz-option nzValue="0" nzLabel="未完成"></nz-option>
              <nz-option nzValue="2" nzLabel="进行中"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="4">
        <nz-form-item>
          <nz-form-label>等级</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="importance" nzAllowClear>
              <nz-option nzValue="0" nzLabel="重要"></nz-option>
              <nz-option nzValue="1" nzLabel="很重要"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="48">
      <div nz-col nzSpan="6">
        <nz-form-item>
          <nz-form-label>工作结束时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker formControlName="end"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="6">
        <nz-form-item>
          <nz-form-label>周期结束时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker formControlName="periodEndTime"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="4">
        <nz-form-item>
          <nz-form-label>上周期完成状态</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="prevStatus" nzAllowClear>
              <nz-option nzValue="1" nzLabel="已完成"></nz-option>
              <nz-option nzValue="0" nzLabel="未完成"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzSpan="5" nzOffset="3">
        <button nz-button nzType="primary" style="width: 50%;margin-left: 28%;">查询</button>
        <button nz-button nzType="link" (click)="restSearchFrom($event)">重置</button>
      </div>
    </div>
  </form>
</div>
<div class="divider content">
  <span class="divider-text">工作列表</span>
  <span class="divider-button">
    <button nz-button nzType="link" (click)="addTask()">添加工作</button>
  </span>
</div>
<div class="date content">
  <nz-table #taskTable [nzData]="taskList" nzTableLayout="fixed" nzBordered nzSize="small" [nzLoading]="isTableLoding">
    <thead>
      <tr>
        <th nzAlign="center">名称</th>
        <th nzAlign="center" nzWidth="20%">描述</th>
        <th nzAlign="center" nzWidth="15%">目标</th>
        <th nzAlign="center" nzWidth="6%">本周期<br>结束时间</th>
        <th nzAlign="center" nzWidth="6%">工作<br>结束时间</th>
        <th nzAlign="center" nzWidth="120px">循环模式</th>
        <th nzAlign="center" nzWidth="80px">上周期<br>状态</th>
        <th nzAlign="center" nzWidth="80px">本周期<br>状态</th>
        <th nzAlign="center" nzWidth="80px">工作<br>状态</th>
        <th nzAlign="center" nzWidth="80px">等级</th>
        <th nzAlign="center" nzWidth="160px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of taskTable.data">
        <td nzAlign="center">{{data.name}}</td>
        <td nzAlign="center">{{data.description}}</td>
        <td nzAlign="center">{{data.target}}</td>
        <td nzAlign="center">{{data.periodEndTime | date:'yyyy-MM-dd'}}</td>
        <td nzAlign="center">{{data.end | date:'yyyy-MM-dd'}}</td>
        <td nzAlign="center">{{data.repeatMode | repeatMode: data.repeatNum}}</td>
        <td nzAlign="center">{{data.prevStatus | processStatus}}</td>
        <td nzAlign="center">{{data.currStatus | processStatus}}</td>
        <td nzAlign="center">{{data.processStatus | processStatus}}</td>
        <td nzAlign="center">{{data.importance | importance}}</td>
        <td nzAlign="center">
          <div nz-row nzJustify="space-between">
            <div nz-col nzSpan="11">
              <button nz-button class="table-action-button" nz-popconfirm
                nzPopconfirmTitle="完成该工作?" nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="completeTask(data)" [disabled]="data.currStatus == 1">完成工作</button>
            </div>
            <div nz-col nzSpan="11">
              <button nz-button class="table-action-button" (click)="handleBriefAdder(data)">添加简报</button>
            </div>
          </div>
          <div nz-row nzJustify="space-between" style="margin-top: 8px;">
            <div nz-row nzSpan="7">
              <button nz-button class="table-action-button" nzType="primary" (click)="handleEditTask(data)">编辑</button>
            </div>
            <div nz-row nzSpan="7">
              <button nz-button class="table-action-button" nzType="primary" nzDanger nz-popconfirm
                nzPopconfirmTitle="删除该工作" nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="deleteTask(data.id)" >删除</button>
            </div>
            <div nz-row nzSpan="7">
              <button nz-button class="table-action-button" (click)="navigateToDetail(data.id)">详情</button>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<nz-modal [(nzVisible)]="isTaskModalVisible" [nzTitle]="taskModalTitle" (nzOnCancel)="handleAdderCancel()"
  (nzOnOk)="handleAdderOk()" [nzClosable]="false" [nzMaskClosable]="false">
  <app-peroidic-task-adder #taskAdder></app-peroidic-task-adder>
</nz-modal>

<nz-modal [(nzVisible)]="isTaskBriefVisible" [nzTitle]="'添加简报'" (nzOnCancel)="handleBriefCancel()"
  (nzOnOk)="handleBriefOk()" [nzClosable]="false" [nzMaskClosable]="false">
  <app-brief-adder #briefAdder></app-brief-adder>
</nz-modal>
